<template>
	<view>
		<view class="top">
			<view class="top1">
				<view style="font-size: 20px;color: white;">1500</view>
				<view style="color: white;">当前现金余额（元）</view>
				<view><button class="button" type="primary" @click="tx_btn">提现</button></view>
			</view>
			<view class="top2">
				<view style="color: white;">累计收入（元）：1700元</view>
				<view style="color: white;">累计提现（元）：200元</view>
			</view>
		</view>

		<uni-card style="margin-top: -32px;border-radius: 10px;">
			<view class="tit">收支明细</view>
			<u-divider text=""></u-divider>
			<uni-section style="margin-top: -10px;margin-bottom: -10px;" title="XX车辆清洗,抛光打蜡服务"
				sub-title="核销时间:2022-10-12 11:09">
				<template v-slot:right>
					<text style="color:#FF6532 ;">+50</text>
				</template>
			</uni-section>
			<u-divider text=""></u-divider>
			<uni-section style="margin-top: -10px;margin-bottom: -10px;" title="提现" sub-title="核销时间:2022-10-12 11:09">
				<template v-slot:right>
					<text style="color:#FF6532 ;">+200</text>
				</template>
			</uni-section>
		</uni-card>


	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			tx_btn() {
				uni.$u.route('/pages/ly/budget/payout')
			}
		}
	}
</script>

<style>
	.top {
		height: 150px;
		display: flex;
		background-image: url(../../../static/images/ly/组 6.png);
	}

	.button {
		height: 27px;
		width: 100px;
		font-size: 15px;
		background-color: #FF6532;
		border-radius: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10px;
	}

	.top1 {
		height: 100px;
		display: flex;
		flex-direction: column;
		/* 设置为列方向布局 */
		justify-content: center;
		/* 垂直居中 */
		align-items: center;
		text-align: center;
		/* 确保文本在子元素中居中 */
		width: 50%;
		border-right: 1px solid white;
	}

	.top2 {
		height: 100px;
		display: flex;
		flex-direction: column;
		/* 设置为列方向布局 */
		justify-content: center;
		/* 垂直居中 */
		margin-left: 15px;
	}

	.tit {
		font-size: 16px;
		font-weight: bold;
	}
</style>